<template>
  <!--视图-->
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="queryForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="queryForm.gender" placeholder="性别" clearable>
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="text" @click="openAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="150">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="120">
        <template v-slot="s">
          {{s.row.gender==1?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="header"
          label="头像"
          width="300">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="delById(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="goPage"
        :page-size="3"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

    <el-dialog title="添加/修改用户" :visible.sync="dialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="addForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addForm.password" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="addForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0" >女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-input v-model="addForm.header" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      //默认属性
      tableData:[],
      queryForm:{},
      dialogFormVisible: false,
      addForm:{},
      formLabelWidth: '120px',
      pageNum:1,
      total:0
    }
  }, methods: {
    goPage(page){
      this.pageNum =page;
      this.list();
      },
    delById(id){
     let ret= confirm("确定要删除吗？");
     if(ret) {
       this.axios.post("http://localhost:9999/user/delById?id=" + id).then(res => {
         if (res.data.code == 200) {
           this.$message.success("删除成功");
           this.list();
         } else {
           this.$message.success("删除失败");
         }
       })
     }
    },
    openEdit(user){
      this.addForm=user;
      this.dialogFormVisible=true;

    },
    openAdd(){
     this.addForm={};
      this.dialogFormVisible=true;//弹出添加的对话框
    },
    //保存
    addOrUpdate(){
      this.axios.post("http://localhost:9999/user/addOrUpdate",this.addForm).then(res=>{
        if(res.data.code==200){
          this.$message.success("操作成功");
          this.dialogFormVisible = false;//关闭对话框
          this.list();//
        }else{
          this.$message.error("操作失败 ");
        }
      })
    },
    //查询方法
     list(){
       this.axios.post("http://localhost:9999/user/list?pageNum="+this.pageNum,this.queryForm).then(res=>{
         this.tableData =res.data.data.list;
         this.total =res.data.data.total;
       })
     }
  }, created() {//初始化
      this.list();
  }
}
</script>

<style scoped>

</style>